<template>
    <div class="indexDrawer">
        <div class="title">
            <div class="titleLeft">
                <img src="@/assets/logo.png" alt="">
            </div>
            <div class="titleRight" @click="back">
                <img src="@/assets/back.png" alt="">
            </div>
        </div>
        <div class="history">
            <el-scrollbar height="78vh" always>
                <div class="historyItem">
                    <div class="itemTitle">
                        <div class="titleIcon">
                            <i class="iconfont icon-lishijilu"></i>
                        </div>
                        <div class="titleText">
                            7天以内
                        </div>
                    </div>
                    <div v-for="(item, index) in titleTime7Array" :key="index"
                        :class="activeFlag == index ? 'historyTitleActive' : 'historyTitle'"
                        @click="checkTitle(index, item.id)">
                        {{ item.title }}
                    </div>
                </div>
            </el-scrollbar>
        </div>

        <div class="newChat">
            <div class="newImg">
                <img src="@/assets/newChat.png" alt="">
            </div>
            <div class="newText" @click="newChat">
                开启新对话
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    inject,
    onBeforeMount,
    reactive,
    ref,
    watch
} from 'vue'
import { ElMessage } from 'element-plus'
import { getAllConversion } from '@/api/api/chat'
import { SetID } from '../../../store/setID'
import { getToken } from '../../../utils/setToken'
//实例化pinia
const SetIDStore = SetID()

//全局变量
const titleTime7Array = reactive([])//聊天记录标题数组
const activeFlag = ref(-1)//选中的聊天记录标题

//关闭聊天记录
const showDrawer = inject('showDrawer')
const back = () => {
    showDrawer.value = false
}

//切换聊天记录
const checkTitle = (index, id) => {
    activeFlag.value = index
    SetIDStore.setID(id)
    ElMessage({
        type: "success",
        message: "已切换到当前会话",
        duration: 1500
    })
}

const newChatFlag = inject('newChat')
//开启新对话
const newChat = () => {
    SetIDStore.removeID()
    newChatFlag.value = true
    //消息提示
    ElMessage({
        type: "success",
        message: "即将开始新对话",
        duration: 1500
    })
    //关闭历史记录
    back()
}

//获取历史记录标题
const getHistoryTitle = () => {

    if (!getToken()) {
        return
    }

    getAllConversion()
        .then(res => {
            titleTime7Array.length = 0
            const list = Array.isArray(res) ? res : res?.results || []
            list.forEach(item => {
                titleTime7Array.push({
                    id: item.id,
                    title: item.title || item.name || `会话-${item.id}`
                })
            });
        }).catch(err => {
            console.log(err)
        })
}
watch(() => SetIDStore.C_ID, (newVlue, oldValue) => {
    if (oldValue === 0 && newVlue !== 0) {
        //清空数组
        titleTime7Array.length = 0
        getHistoryTitle()
    }
})

onBeforeMount(() => {
    getHistoryTitle()
})
</script>

<style lang="scss" scoped>
.indexDrawer {
    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
        margin: 20px auto;
        padding-bottom: 20px;

        .titleLeft {
            width: 92px;
            height: 38px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .titleRight {
            width: 24px;
            height: 24px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .history {
        width: 218px;
        margin: 0 auto;
        height: 78vh;
        padding-top: 10px;
        border-bottom: 1px solid #374A48;
        border-top: 1px solid #374A48;

        .historyItem {
            .itemTitle {
                display: flex;
                align-items: center;

                .titleIcon {
                    .iconfont {
                        font-size: 30px !important;
                    }
                }

                .titleText {
                    margin-left: 10px;
                    font-size: 18px;
                }
            }

            .historyTitle {
                width: 218px;
                margin-top: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            .historyTitleActive {
                width: 218px;
                margin-top: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background: #DEF4F8;
                border-radius: 5px;
                padding: 4px;
                cursor: pointer;
            }
        }
    }

    .newChat {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        width: 212px;
        height: 51px;
        border-radius: 30px;
        background: #DEF4F8;
        color: #fff;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.3);

        .newImg {
            width: 28px;
            height: 30px;
            margin-right: 15px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .newText {
            cursor: pointer;
        }
    }
}
</style>
